<!--
 * @Author: “ChengNan” 1429323234@qq.com
 * @Date: 2024-06-04 14:12:47
 * @LastEditors: “ChengNan” 1429323234@qq.com
 * @LastEditTime: 2024-06-20 16:12:36
 * @FilePath: /src/views/4.numberAnimation/numberAnimation.vue
 * @Description: 数字滚动动画
-->
<template>
  <div>
    <h1>数字滚动动画</h1>
    <div style="height: 350px; margin: 300px auto;">
      
      <div style="display: flex;justify-content: center;">
  
        <div v-for="(item, index) in (`${count}`).split('')" :key="index" 
          style="width: 30px; height: 30px; border: 1px solid;box-sizing: border-box;">
          <NumberAnimation :count="+item"/>
        </div>
  
        <button @click="count++" style="margin-left: 20px;">++++++  {{ count }}</button>
        <button @click="count--" style="margin-left: 20px;">------  {{ count }}</button>
      </div>
    </div>
    
  </div>
</template>

<script>
import NumberAnimation from '@/components/NumberAnimation';
export default {
  name: 'numberAnimation',
  components: {
    NumberAnimation,
  },
  data() {
    return {
      count: 0,
    }
  },
  mounted () {
  },
}
</script>

<style lang="scss" scoped>

</style>